<template>

	<view v-for="(session,i) in heartList" :key="i">














		<view class="paper">

			<view class="paperItem">

				<uni-card :is-shadow="false">




					<view class="organizerItem" style="position: relative;">
						<image v-for="(pa,indexPa) in session.paper.pa" :key="indexPa" mode="aspectFit" class="avatar"
							:src="pa.avatar"></image>

						<view class="paperTime" style="padding-left: 100rpx;">
							<view class=" pv-20">{{session.paper.time}}</view>
							<text
								class="redText boldText">{{session.paper.invited == "No" ? "":session.paper.invited}}</text>

						</view>




						<view class="notification">
							<uni-icons v-if="isInHeartList(session.paper)" type="heart-filled" size="30"
								style="color: #a31953;" @click="cancelHeartFn(session,session.paper)"></uni-icons>
							<uni-icons v-else type="heart" size="30"
								@click="setHeartFn(session,session.paper)"></uni-icons>
						</view>
					</view>

					<view class="paper_title boldText pt-20">
						{{session.paper.title}}
					</view>

					<view class="author pt-20">
						<view v-for="(author,indexAuthor) in session.paper.author" :key="indexAuthor"
							style="padding-bottom: 10rpx;">
							<text class="redText" v-if="author.people_id == session.paper.pa[0]?.people_id">+*</text>
							<text class="redText pr-20" @click="authorClick(author)">{{author.first_name}}
								{{author.last_name}}</text>
							<text>({{author.institute}})</text>
						</view>
					</view>




					<view class="session_info">
						<view>
							{{session.nb}}
						</view>
						<view>
							{{session.session_date}}
						</view>
						<view>
							{{session.am_pm}}
						</view>
						<view>
							Room: {{session.room}}
						</view>
					</view>

					<view class="sessionDetail">
						<text class="redText" @click="sessionDetail(session)">View Session Detail</text>
					</view>
				</uni-card>
			</view>

		</view>





	</view>
</template>

<script>
	import {
		request
	} from '../../../utils/request.js'

	import {
		setHeartList,
		getHeartList,
		cancelHeart
	}
	from '../../../utils/storage.js'
	export default {
		data() {
			return {
				heartList: []
			}
		},
		onLoad(options) {

			this.getHeartListFn();
		},
		onPullDownRefresh() {
			this.getHeartListFn(

			);


			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			authorClick(author) {
				uni.navigateTo({
					url: `/pages/webView/webView?src=${encodeURIComponent("https://piers.org/profile.html?uid="+author.people_id)}`
				})
			},


			setHeartFn(session, paper) {
				setHeartList({
					paper_id: paper.paper_id,
					paper: paper,
					session_id: session.session_id,
					nb: session.nb,
					session_date: session.session_date,
					am_pm: session.am_pm,
					room: session.room


				})
				this.getHeartListFn();
			},

			getHeartListFn() {
			
				let list = getHeartList();
			this.heartList = list.sort((session1,session2)=>{
				console.log(new Date(`${session1.session_date} ${session1.paper.time}`).valueOf() - new Date(`${session2.session_date} ${session2.paper.time}`).valueOf())
				return new Date(`${session1.session_date} ${session1.paper.time}`).valueOf() - new Date(`${session2.session_date} ${session2.paper.time}`).valueOf() 
			})
			},
			cancelHeartFn(session, paper) {
				cancelHeart(paper);
				this.getHeartListFn();
			},

			isInHeartList(paper) {
				let has = false;
				this.heartList.map(session => {
					if (session.paper_id == paper.paper_id) {
						has = true;
					}
				})

				return has;
			},
			sessionDetail(session) {
				uni.navigateTo({
					url: `/pages/Program/Detail?session_id=${session.session_id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.paperItem {
		position: relative;
	}

	.paper {
		position: relative;
	}

	.organizerItem {
		display: flex;
		padding-top: 20rpx;

		.info {
			flex: 1;
			padding-left: 20rpx;
		}
	}

	.avatar {
		display: flex;
	}

	.notification {
		position: absolute;
		top: 20rpx;
		right: 0rpx;
	}

	.sessionDetail {
		display: flex;
		flex-direction: row-reverse;
	}
</style>